import React, { Component } from 'react';
import { KPIType } from '../../stores/CaseStore';
import { Icon } from 'antd';

import './kpiTree.scss';

interface KPITreeProps {
    kpiDataList: KPIType;
}

export default class KPITree extends Component<KPITreeProps> {
    state = {
        flags: []
    };
    componentWillMount() {
        const { kpiDataList } = this.props;
        // 初始化开关flag
        let arr: boolean[] = [];
        kpiDataList.children!.forEach((v: KPIType, i: number) => {
            arr.push(false);
        });
        this.setState({ flags: arr });
    }
    render(): JSX.Element {
        const { kpiDataList } = this.props;
        return (
            <div>
                <div className="total-title">
                    {`${kpiDataList.title} (${kpiDataList.total}): ${kpiDataList.kpi}`}
                </div>
                <div className="kpi-detail-box">
                    {
                        kpiDataList.children!.map((v: KPIType, i: number) => (
                            <div>
                                <div
                                    className="sub-detail-box"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        let arr: boolean[] = this.state.flags;
                                        arr[i] = !arr[i];
                                        this.setState({ flags: arr });
                                    }}
                                    key={i}
                                >

                                    {
                                        !this.state.flags[i] ? <Icon type="caret-right" /> : <Icon type="caret-down" />
                                    }
                                    {`${v.title} (${v.total}): ${v.kpi}`}
                                </div>
                                {
                                    this.state.flags[i] ?
                                        (<div>

                                            {
                                                v.children!.map((value: KPIType, index: number) => {
                                                    return (
                                                        <div key={index} className="last-detail-box">
                                                            {
                                                                `${value.title} 
                                                                  ${ value.total ? '(' + value.total + ')分' : ''}: 
                                                                   ${ value.result ? value.result + '%' : ''} 
                                                                    ${ value.kpi}`}
                                                        </div>
                                                    );
                                                })
                                            }
                                        </div>) : undefined
                                }
                            </div>
                        ))
                    }
                </div>
            </div>
        );
    }
}